<template>
    <el-container>
        <el-header>
          <h3>管理员添加</h3>
        </el-header>
        <el-main>
            <el-form ref="form" :model="form" :rules="rule" label-position="right" label-width="120px">
              <el-form-item label="图像:" prop="imageUrl">
                <el-upload
                  class="avatar-uploader"
                  :action="upload_url"
                  :show-file-list="false"
                  :on-success="uploadSuccess"
                  :before-upload="beforeUpload"
                  :headers="header"
                  >
                  <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <div class="el-upload__tip" slot="tip">图片大小不能超过2M</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="管理员昵称:" prop="name">
                <el-input v-model="form.name"  type="text" placeholder="请输入管理员昵称"></el-input>
              </el-form-item>
              <el-form-item label="账号:" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名" @blur.prevent="checkUsername"></el-input>
              </el-form-item>
              <el-form-item label="密码:" prop="password">
                <el-input v-model="form.password" show-password placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="设置管理分校:" prop="school_id">
                  <el-select v-model="form.school_id" placeholder="请选择">
                    <el-option
                      v-for="item in schoolList"
                      :label="item.name"
                      :key="item.id"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="管理权限:"  prop="auth">
                <el-switch
                  v-model="form.auth"
                ></el-switch>
              </el-form-item>
              <el-form-item>
                <el-button size="medium" type="primary" icon="el-icon-add" @click.prevent="add" :loading="loading">添加</el-button>
              </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
  import {checkUsername, addManager} from '@/api/manager'
  import {schoolList} from '@/api/school'
  import {getToken} from '@/utils/auth'
    export default {
        name: "add",
        data () {
            return {
                upload_url: 'https://huaxin.ioboo.cn/admin/uploadManagerImage',
                header: {
                    Authorization: getToken()
                },
                form: {
                    imageUrl: '',
                    name: '',
                    username: '',
                    password: '',
                    school_id: '',
                    auth: true
                },
                rule: {
                    imageUrl: [
                        {required: true, message: '请上传图片信息'}
                    ],
                    name: [
                        {required: true, message: '用户昵称为必填项', trigger: 'blur'},
                        {max: 50, message: '用户昵称最大只能是50个字符长度', trigger: ['change','blur']}
                    ],
                    username: [
                        {required: true, message: '用户名为必填项'},
                        {min: 5, max: 20 , message: '用户名字符长度在5到20个字符之间', trigger: ['change','blur']}
                    ],
                    password: [
                        {required: true, message: '密码为必填项', trigger: 'blur'},
                        {min: 5, message:'密码最少长度为5位', trigger: ['change','blur']}
                    ],
                    school_id: [
                        {required: true, message: '请选择管理分校'},
                        {type: 'number', message: '请选择管理分校'}
                    ]

                },
                schoolList: [],
                loading: false,
            };
        },
        methods: {
            uploadSuccess(response, file, fileList) {
              if (response.code == 200) {
                  this.form.imageUrl = response.data.url;
              } else {
                  this.$notify.error(response.msg);
              }
            },
            beforeUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            add() {
              this.$refs.form.validate(valid => {
                  if (!valid) {
                      return false;
                  }

                  this.loading = true;
                  var data = {
                      name: this.form.name,
                      username: this.form.username,
                      password: this.form.password,
                      school_id: this.form.school_id,
                      auth_status: this.form.auth === true ? 1 : 2,
                      image: this.form.imageUrl
                  };
                  addManager(data).then(response => {
                      this.loading = false;
                      this.$message.success(response.msg);
                      this.$router.push({path: '/manager/list'});
                  }).catch(err => {
                      this.loading = false;
                  })
              });
            },
            checkUsername() {
                if (this.form.username.length >= 5) {
                    checkUsername({username: this.form.username}).then( response => {
                        this.$notify.success(response.msg);
                    }).catch(error => {
                        this.form.username = '';
                    })
                }
            }
        },
        mounted() {
            schoolList().then(response => {
              this.schoolList = response.data;
            }).catch(error => {

            })
        }
    }
</script>

<style lang="scss" scoped>
    .el-container {
      width: 70%;
      max-width:100%;
      position: relative;
      overflow: hidden;
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      margin: 10px auto;
    }
  .el-header {
    width: 100%;
    max-width: 100%;
    margin: 0px auto;
  }
  .el-header h3 {
    text-align: center;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
  }
  .el-main{
    .el-input {
      width: 40%;
    }
  }

</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
